<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>轻松找房</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/public.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/header.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/Findroom.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/bottom.css"/>
    <script src="${pageContext.request.contextPath}/renting/js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/layui.css"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
    <script src="${pageContext.request.contextPath}/renting/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <a href="${pageContext.request.contextPath}/renting/index.jsp" class="nav_title">好客租房</a>
            <select class="select">
                <option value="重庆">重庆</option>
                <option value="贵阳">贵阳</option>
                <option value="重庆">重庆</option>
                <option value="贵阳">贵阳</option>
            </select>
            <ul class="nav_ul">
                <li><a href="${pageContext.request.contextPath}/renting/index.jsp">首页</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/Findroom.jsp" style="color: #2981c8;">轻松找房</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/entry.jsp">房东入驻</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/chat_news.jsp">消息</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/login.jsp">登录</a></li>
            </ul>
            <img src="${pageContext.request.contextPath}/renting/img/icon/lianxi-1.png" class="nav_img" style="margin-top: -20px;">
            <p class="nav_phone">
                <span>13301131116</span>
                <span>13301131116</span>
            </p>
        </div>
    </div>
    <div class="content" style="height: 350px">
        <div class="search">
            <div class="region">
                <p>区域:</p>
                <ul id="region">
                    <li><a href="#">不限</a></li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            <div class="region metro region1">
                <p>方式:</p>
                <ul id="way">
                    <li><a href="javascript:(0)">不限</a></li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            <div class="region rent region1">
                <p>房租:</p>
                <ul id="rent">
                    <li><a href="javascript:(0)">不限</a></li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            <div class="region roomtype region1">
                <p>类型:</p>
                <ul id="roomtype" style="height: 60px">
                    <li><a href="#">不限</a></li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            <div class="region roomtype region1">
                <p style="margin-top: 10px">户型:</p>
                <ul id="roomtype1" style="margin-top: 10px">
                    <li><a href="#">不限</a></li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            <div class="search_bottom">
                <div class="list_one Orientation">
                    <p>朝向:</p>
                    <ul id="direction">
                        <li><a href="#">不限</a></li>
                    </ul>
                    <div style="clear: both;"></div>
                </div>
                <div class="list_one Orientation">
                    <p>装修:</p>
                    <ul id="floor">
                        <li><a href="javascript:(0)">不限</a></li>
                    </ul>
                    <div style="clear: both;"></div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
    <div class="roomshow">
        <div class="sort">
            <p>默认排序:</p>
            <ul>
                <li>最新发布</li>
                <li class="price">价格<img src="${pageContext.request.contextPath}/renting/img/icon/paixu.png"></li>
                <li class="area">面积<img src="${pageContext.request.contextPath}/renting/img/icon/paixu.png"></li>
            </ul>
            <div style="clear: both;"></div>
        </div>
        <div id="zhanshi">
        </div>
        <div id="test">
            <ul class="pagination" id="fen">
            </ul>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="bottom">
        <p>沪公网安备 31011402005354号</p>
    </div>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/renting/js/Findroom.js"></script>
<script src="${pageContext.request.contextPath}/renting/js/header.js"></script>
<script type="text/javascript">
    var login=sessionStorage.getItem("login");
    var url="";
    if(login==1){
        url="${pageContext.request.contextPath}/renting/pages/tenant/inspection.jsp";
    }
    if(login==2){
        url="${pageContext.request.contextPath}/renting/pages/landlord/release.jsp";
    }
    judge_login(url,"${pageContext.request.contextPath}/renting/pages/onther/login.jsp");
</script>
<!--数据提交-->
<script>
    var txt={"cityId":${city.rid},"cId":null,"rentalType":null,"price":null,"buildingType":null,"houseType":null,"towards":null,"renovationCondition":null};
    function fenClick(i,cid,rentalTypeList,price,buildingType,houseType,towards,renovationCondition){
       console.log(txt);
        $("#fen").html("");
        $("#fen>li").siblings().removeClass("active");
        $("#fen>li:eq("+i+")").addClass("active")
        $("#zhanshi").html("");
        if(cid!=null){
            if(cid==txt.cId){
                txt.cId=null;
            }else {
                txt.cId=cid;
            }
        }
        if(rentalTypeList!=null){
            if(rentalTypeList==txt.rentalTypeList){
                txt.rentalTypeList=null;
            }else {
                txt.rentalType=rentalTypeList;
            }

        }
        if(price!=null){
            if(price==txt.price){
                txt.price=null;
            }else {
                txt.price=price;
            }

        }
        if(buildingType!=null){
            if(buildingType==txt.buildingType){
                txt.buildingType=null;
            }else {
                txt.buildingType=buildingType;
            }

        }
        if(houseType!=null){
            if(houseType==txt.houseType){
                txt.houseType=null;
            }else {
                txt.houseType=houseType;
            }
        }
        if(towards!=null){
            if(towards==txt.towards){
                txt.towards=null;
            }else {
                txt.towards=towards;
            }

        }
        if(renovationCondition!=null){
            if(renovationCondition==txt.buildingType){
                txt.buildingType=null;
            }else {
                txt.buildingType=renovationCondition;
            }

        }
        console.log(txt);
        $.ajax({
            url:"${pageContext.request.contextPath}/house/queryHouseLimit?limit=5&page="+i+"&showWi=3",
            type:"post",
            data:"condition="+JSON.stringify(txt),
            dataType:"JSON",
            success:(rs)=>{
                $.each(rs.list,function (i,j){
                    var txt;
                    switch (j.paymentMethod) {
                        case 0:
                            txt='免押';
                            break;
                        case 1:
                            txt='压一付一';
                            break;
                        case 2:
                            txt='压一付二';
                            break;
                        case 3:
                            txt='压一付三';
                            break;
                    }
                    var Listings=$("<div class='show_list'><a href='${pageContext.request.contextPath}/house/queryHouseById?rid="+j.rid+"&showWi=2' style='color: #000000;'><div class='roomimg'><img src='${pageContext.request.contextPath}/renting/img/"+j.housePicture+"'></div><div class='show_list_right'><h4>"+j.rentalType+"·"+j.communityName+"<span><i>"+j.price+"</i>元/月</span></h4><p>"+j.houseType+"/"+j.constructionArea+"m²/"+j.towards+"</p><p>"+j.CityName+"·"+j.communityName+"</p><ul><li>"+txt+"</li><li>"+j.rentalType+"</li><li>"+j.renovationCondition+"</li></ul></div></a></div>");
                    Listings.appendTo("#zhanshi");
                });
                for (var i=1;i<=rs.pagesum;i++){
                    if(i==1){
                        var Listings=$('<li onclick=""><a href="#">&laquo;</a></li>');
                        Listings.appendTo("#fen");
                    }
                    if(i==rs.pageNo){
                        var Listings=$('<li class="active" onclick="fenClick('+i+')"><a>'+i+'</a></li>');
                        Listings.appendTo("#fen");
                    }else {
                        var Listings=$('<li onclick="fenClick('+i+')"><a>'+i+'</a></li>');
                        Listings.appendTo("#fen");
                    }
                    if(i==rs.pagesum){
                        var Listings=$('<li><a href="#">&raquo;</a></li>');
                        Listings.appendTo("#fen");
                    }
                }
            }
        });
    }
</script>
<script>
    $(function (){
        var txt={"cityId":"19586"};
        $.ajax({
            url:"${pageContext.request.contextPath}/house/queryHouseLimit?limit=5&page=1&showWi=3",
            type:"post",
            data:"condition="+JSON.stringify(txt),
            dataType:"JSON",
            success:(rs)=>{
                console.log(rs);
                $.each(rs.list,function (i,j){
                    var txt;
                    switch (j.paymentMethod) {
                        case 0:
                            txt='免押';
                            break;
                        case 1:
                            txt='压一付一';
                            break;
                        case 2:
                            txt='压一付二';
                            break;
                        case 3:
                            txt='压一付三';
                            break;
                    }
                    var Listings=$("<div class='show_list'><a href='${pageContext.request.contextPath}/house/queryHouseById?rid="+j.rid+"&showWi=2' style='color: #000000;'><div class='roomimg'><img src='${pageContext.request.contextPath}/renting/img/"+j.housePicture+"'></div><div class='show_list_right'><h4>"+j.rentalType+"·"+j.communityName+"<span><i>"+j.price+"</i>元/月</span></h4><p>"+j.houseType+"/"+j.constructionArea+"m²/"+j.towards+"</p><p>"+j.CityName+"·"+j.communityName+"</p><ul><li>"+txt+"</li><li>"+j.rentalType+"</li><li>"+j.renovationCondition+"</li></ul></div></a></div>");
                    Listings.appendTo("#zhanshi");
                });
                for (var i=1;i<=rs.pagesum;i++){
                    if(i==1){
                        var Listings=$('<li onclick=""><a href="#">&laquo;</a></li>');
                        Listings.appendTo("#fen");
                    }
                    if(i==rs.pageNo){
                        var Listings=$('<li class="active" onclick="fenClick('+i+')"><a>'+i+'</a></li>');
                        Listings.appendTo("#fen");
                    }else {
                        var Listings=$('<li onclick="fenClick('+i+')"><a>'+i+'</a></li>');
                        Listings.appendTo("#fen");
                    }
                    if(i==rs.pagesum){
                        var Listings=$('<li><a href="#">&raquo;</a></li>');
                        Listings.appendTo("#fen");
                    }
                }
            }
        });
    });
</script>
<script>
    //查询主页信息
    $(function (){
        $.ajax({
            url:"${pageContext.request.contextPath}/house/byid",
            type:"post",
            data:{"id":19586},
            dataType:"JSON",
            success:(rs)=>{

                console.log(rs);
                //区域
                for(var i=0;i<rs.cityList.length;i++){
                    var Listings=$("<li onclick='fenClick("+i+","+rs.cityList[i].rid+","+null+","+null+","+null+","+null+","+null+","+null+")'><a href='#'>"+rs.cityList[i].name+"</a></li>");
                    Listings.appendTo("#region");
                }
                //类型
                for(var i=0;i<rs.buildingTypeList.length;i++){
                    var a = 'adaa';
                    var Listings=$("<li id='roo"+i+"'><a>"+rs.buildingTypeList[i]+"<a/></li>");
                    Listings.appendTo("#roomtype");
                    $("#roo"+i).attr("onclick","fenClick("+i+","+null+","+null+","+null+",'"+rs.buildingTypeList[i]+"',"+null+","+null+","+null+")");
                }
                //朝向
                for(var i=0;i<rs.towardsList.length;i++){
                    var Listings=$("<li id='tion"+i+"'><a>"+rs.towardsList[i]+"<a/></li>");
                    Listings.appendTo("#direction");
                    $("#tion"+i).attr("onclick","fenClick("+i+","+null+","+null+","+null+","+null+","+null+",'"+rs.towardsList[i]+"',"+null+")");
                }
                //价钱
                var new_arr=[];
                var new_arr1=[]
                for(var i=0;i<rs.priceList.length;i++) {
                    var items=Math.floor(rs.priceList[i]/500) ;
                    //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                    if($.inArray(items,new_arr)==-1) {
                        new_arr.push(items);
                    }
                }
                console.log(new_arr);
                for(var i=0;i<new_arr.length;i++){

                        var Listings=$("<li id='ren"+i+"'><a href='#'>"+new_arr[i]*500+"-"+(new_arr[i]+1)*500+"<a/></li>");
                        Listings.appendTo("#rent");
                        $("#ren"+i).attr("onclick","fenClick("+(i+1 )+","+null+","+null+",'"+new_arr[i]*500+"-"+(new_arr[i]+1)*500+"',"+null+","+null+","+null+","+null+")");

                }
                //户型
                var huxing=[];
                for(var i=0;i<rs.houseTypeList.length;i++) {
                    var items=rs.houseTypeList[i];
                    //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                    if($.inArray(items,huxing)==-1) {
                        huxing.push(items);
                    }
                }
                for(var i=0;i<huxing.length;i++){
                    var Listings=$("<li id='type"+i+"'><a href='#'>"+huxing[i]+"<a/></li>");
                    Listings.appendTo("#roomtype1");
                    $("#type"+i).attr("onclick","fenClick("+i+","+null+","+null+","+null+","+null+",'"+huxing[i]+"',"+null+","+null+")");
                }
                //装修
                for(var i=0;i<rs.renovationConditionList.length;i++){
                    var Listings=$("<li id='flo"+i+"'><a href='#'>"+rs.renovationConditionList[i]+"<a/></li>");
                    Listings.appendTo("#floor");
                    $("#flo"+i).attr("onclick","fenClick("+i+","+null+","+null+","+null+","+null+","+null+","+null+",'"+rs.renovationConditionList[i]+"')");
                }
                //方式
                for(var i=0;i<rs.rentalTypeList.length;i++){
                    var Listings=$("<li id='way"+i+"'><a href='#'>"+rs.rentalTypeList[i]+"<a/></li>");
                    Listings.appendTo("#way");
                    $("#way"+i).attr("onclick","fenClick("+i+","+null+",'"+rs.rentalTypeList[i]+"',"+null+","+null+","+null+","+null+","+null+")");

                }
//==============================================js 样式重载（ajax执行在js价值之后） ================================================
                $("#region>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#roomtype>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#direction>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#rent>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#roomtype1>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#floor>li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
                $("#way >li").click(function(){
                    var a=$(this);
                    if(a.hasClass("active1")){
                        a.removeClass("active1")
                        return
                    }
                    Onclick(a);
                })
//==============================================js 样式重载（ajax执行在js价值之后） ================================================

            }
        });
    });
</script>
